<template>
    <div class="mainBox">
        <PageHeaderNav
            content="快问快答"
            :need-back="true"
            :need-underline="false"
        />
        <div class="content" ref="content">
            <chat
                v-for="chat in chats"
                :msg-type="chat.msgType"
                :msg="chat.msg"
            ></chat>
        </div>


        <div class="search" ref="search">
            <van-field
                v-model="msg"
                rows="1"
                autosize
                type="textarea"
                placeholder="请输入..."
                @input="inputChange"
                :disabled="inputStop"
            />

            <div class="sendBtn btnFocus" @click="send">
                <img src="@/assets/images/searchView/send.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";
import Chat from "@/components/Search/Chat.vue";

export default {
    name: "AIChatView",
    components: {PageHeaderNav, Chat},

    data() {
        return {
            // 本页面计时器
            timers: [],

            // AI加载回答的计时器
            aiTimer: null,

            // 是否禁止输入
            inputStop: false,

            // 用户的问题
            msg: null,

            // 聊天chat对象
            chats: [
                {msgType: "AI", msg: "你好，我是安安，有什么可以帮助你的吗？"},
            ]
        }
    },

    methods: {
        inputChange() {
            this.timers.push(setInterval(() => {
                const searchHeight = this.$(this.$refs.search).css("height")
                this.$(this.$refs.content).css("height", `calc(100vh - 65px - 20px - ${searchHeight})`)
            }, 500))
        },

        send() {
            if (!this.msg.length) return this.$message({
                message: '想想说点什么吧~',
                type: 'warning'
            })

            this.inputStop = true

            let userChat = {msgType: "user", msg: this.msg}
            let aiChat = {msgType: "AI", msg: "思考中🤔"}

            // 显示对话chat
            this.chats.push(userChat)
            this.chats.push(aiChat)

            // 动态显示AI chat的思考
            if (this.aiTimer) {
                clearInterval(this.aiTimer)
                this.aiTimer = null
            }
            let num = 0
            this.aiTimer = setInterval(() => {
                if (num === 3) {
                    aiChat.msg = aiChat.msg.split(".")[0]
                    num = 0
                } else {
                    aiChat.msg += "."
                    num++
                }
            }, 500)

            // 滚动到 最底部
            const scrollHeight = this.$(this.$refs.content).prop("scrollHeight")
            this.$(this.$refs.content).animate({scrollTop: scrollHeight}, 400)

            this.request.post("/searchEngines/aiChat/", {
                msg: this.msg
            }).then((response) => {
                const status = response["code"] === 200

                if (status) {
                    // 回写数据
                    let answer = response["data"]["answer"]

                    // 格式化文本
                    if (answer[0] === '"') answer = answer.slice(1, answer.length)
                    if (answer[answer.length - 1] === '"') answer = answer.slice(0, answer.length - 1)
                    answer = answer.replaceAll("\\n", "<br>")

                    aiChat.msg = answer

                    // 滚动到 最底部
                    const scrollHeight = this.$(this.$refs.content).prop("scrollHeight")
                    this.$(this.$refs.content).animate({scrollTop: scrollHeight}, 400)
                    this.msg = ""

                } else {
                    aiChat.msg = "安安开小差去了..."
                }

                if (this.aiTimer) {
                    clearInterval(this.aiTimer)
                    this.aiTimer = null
                }
                this.inputStop = false

            }).catch((error) => {
                console.log(error)
                if (this.aiTimer) {
                    clearInterval(this.aiTimer)
                    this.aiTimer = null
                }
                aiChat.msg = "安安开小差去了..."
                this.inputStop = false
            })
        }
    },

    beforeDestroy() {
        if (this.timers.length) {
            for (const timer of this.timers) {
                clearInterval(timer)
            }
        }
        if (this.aiTimer) clearInterval(this.aiTimer)
    }
}
</script>

<style lang="less" scoped>
* {
    box-sizing: border-box;
}

.mainBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: white;

    .content {
        width: 100%;
        min-height: calc(100vh - 65px - 35vh - 20px);
        overflow-y: scroll;
    }

    .search {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        box-sizing: border-box;
        width: calc(100% - 40px);
        margin: auto;
        display: flex;
        justify-content: space-between;
        box-shadow: #d3d1d1 0 0 10px;
        border-radius: 5px;
        align-items: end;

        > .van-cell {
            width: calc(100% - 25px - 15px);
            box-sizing: border-box;
            border-radius: 5px;
            max-height: 35vh;
            overflow-y: scroll;
            /* 隐藏滚动条 */
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */

        }

        /* 隐藏滚动条 */

        > .van-cell::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }

        ::v-deep .van-cell__title {
            display: none;
        }

        .sendBtn {
            align-self: center;

            img {
                width: 25px;
                height: auto;
                margin-right: 15px;
            }
        }
    }
}
</style>